<template>
  <div>
    <!-- 导航栏 -->
    <Nav></Nav>

    <!-- view视图 -->
    <transition name="slide-fade" mode="out-in">
      <router-view class="mt-5" />
    </transition>
  </div>
</template>


<script>
// 引入bootstrap的csss样式
import "./assets/css/bootstrap.min.css";
import Nav from "./components/Nav.vue";
export default {
  name: "App",
  components: { Nav },
};
</script>

<style>
/* 自定义样式 */
h1 {
  font-size: 24px;
  font-weight: bold;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>
